<template>
	<view>
		
	</view>
</template>

<script setup>
	//filter()方法
	//会对原数组中的每个元素应用指定的函数，并返回一个新数组，其中包含符合条件的元素。
	//原数组不会受到影响。
	
	//语法:filter(callbackFn)
	
	//1.找出数组中大于10的数据放到新数组中
	let arrs1 = [5,7,8,15,22,1,2];
	const newArr1 = arrs1.filter((item,index,self)=>{
		//console.log(`${item}-${index}-${self}`);
		return item>10
	})
	console.log(newArr1);
	
	//数组对象中，年龄小于30岁的数据：
	let arrs2 = [{name:"张三",age:16},{name:"李四",age:40},{name:"王五",age:28},{name:"汤姆",age:20}];
	const newArr2 = arrs2.filter(item=>item.age>30)
	console.log(newArr2);
	
	//2.数组去重，结合indexOf方法
	let arrs3 = [6,1,2,3,5,3,6];
	const newArr3 = arrs3.filter((item,index,self)=>{
		return self.indexOf(item) == index
	})
	console.log(newArr3);
	
	//Set()集合  数组去重
	const newArr4 = new Set(newArr3)
	console.log(newArr4);
	
	//3.数组对象中过滤掉无用数据 （没有id和id为null 去掉）
	let arrs5 = [{id:1,name:"HTML5"},{id:2,name:"JavaScript"},{id:null,name:"小程序"},{name:"NodeJS"},{id:3,name:"VueJS"}];
	const newArr5 = arrs5.filter(item=>{
		return item.id
	})
	console.log(newArr5);
	
	//4.filter和map组合使用，可以使用链式写法；
	//首先去除无用数据，然后给每一条增加一个属性author
	let arrs6 = [{id:1,name:"HTML5"},{id:2,name:"JavaScript"},{id:null,name:"小程序"},{name:"NodeJS"},{id:3,name:"VueJS"}];
	const newArr6 = arrs6.filter(item=>{
		return item.id
	}).map(item=>{
		return {
			...item,
			author:'wqh'
		}
	})
	console.log(newArr6);
	
</script>

<style lang="scss" scoped>
	       
</style>
